<template>
	<div class="errand">

		<daya-clone-navbar :prop_clone_navbar="clone_navbar" :prop_is_ipx="is_ipx"/>

		<image :src="runner_bg_image" mode="scaleToFill" />
		<div class="tip" @click="toRiderList">
			附近有
			<span>{{ runner_near_count }}</span>
			位骑士
		</div>


		<div class=" px-5 flex justify-between items-center  ">
			<view @click="toRiderList">查看附近骑士</view>
			<view
          @click="add_runner_order"
          class="w-16 h-16 rounded-full   flex justify-center items-center text-white bg-yellow-400">
        <view>下单</view>
      </view>
		</div>

    <!--{{runnerTem}}-->

		<div class=" flex flex-row flex-wrap justify-start  items-start px-5 after:flex-auto " style="min-height: 120px;">
			<div v-for="item in runnerTem" :key="item.id" @click="onHandleClick(item)"  class="nav-runner-item">{{ item.title }}</div>
			<div @click="goToPageUrlLogin('/ymq_canyino2o/pages/errand/add_order/index?runnder_type=all')"  class="nav-runner-item">功能全开</div>
			<div @click="goToPageUrlLogin('/ymq_canyino2o/pages/errand/add_order/index?runnder_type=intra_city_express')"  class="nav-runner-item">同城快递</div>
			<div @click="goToPageUrlLogin('/ymq_canyino2o/pages/errand/add_order/index?runnder_type=rider_purchase')"  class="nav-runner-item">代买物品</div>
			<div @click="goToPageUrlLogin('/ymq_canyino2o/pages/errand/add_order/index?runnder_type=fetch_express')"  class="nav-runner-item">取快递</div>
			<div @click="goToPageUrlLogin('/ymq_canyino2o/pages/errand/add_order/index?runnder_type=express_delivery')"  class="nav-runner-item">寄快递</div>
		</div>

		<div class="feature-wrapper mt-5 px-5">
			<div class="title">跑腿特色</div>
			<div class="feature">
				<div class="feature-item">
          <image src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/runner/tcps.png" mode="scaleToFill" />
					<span>同城配送</span>
				</div>
				<div class="feature-item">
          <image src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/runner/qtfw.png" mode="scaleToFill" />
					<span>全天服务</span>
				</div>
				<div class="feature-item">
					<image src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/runner/wndg.png" mode="scaleToFill" />
					<span>万能代购</span>
				</div>
			</div>
		</div>
		<!--<uni-popup ref="popup" background-color="#fff" style="padding: 100rpx">-->
		<!--	<button class="button" style="width: 20%; display: inline-block; margin: 10px" v-for="item in runnerTem" :key="item.id" @click="onHandleClick(item)">-->
		<!--		<text class="button-text">{{ item.title }}</text>-->
		<!--	</button>-->
		<!--</uni-popup>-->
	</div>
</template>

<script>
var siteinfo = require('../../../siteinfo.js');
var app = getApp();
export default {
	components: {},
	data() {
		return {
      runner_near_count:0,
			runnerTem: [],
			runner_bg_image: ''
		};
	},
	computed: {},
	watch: {},

	// 页面周期函数--监听页面加载
	onLoad() {

		app.globalData.setNavigationBarColor(this);
		this.appPageOnLoad(app);
	},
	// 页面周期函数--监听页面初次渲染完成
	onReady() {},
	// 页面周期函数--监听页面显示(not-nvue)
	onShow() {},
	// 页面周期函数--监听页面隐藏
	onHide() {},
	// 页面周期函数--监听页面卸载
	onUnload() {},
	created() {
    this.runnerTem=uni.getStorageSync("runnerTem_runnerTem")
    this.runner_bg_image=uni.getStorageSync("runner_bg_image")
		this.getRunnerTem();
		this.getRunnerBg()
	},
  mounted() {
    this.runner_near_count=uni.getStorageSync("runner_near_count");
    this.load_runner_top_near_distance();
  },
	methods: {
    async load_runner_top_near_distance() {

      await uni.getLocation({
        type: 'gcj02',
        success:  (res) => {

          app.globalData.util.request({
            url: 'entry/wxapp/runner_near_info',
            cachetime: '0',
            method: 'post',
            data: {
              longitude: res.longitude,
              latitude: res.latitude
            },
            success: (t)=> {
              uni.setStorageSync("runner_near_count", t.data.data.runner_near_count);
              this.runner_near_count=t.data.data.runner_near_count
            }
          })

        },
        fail: (res) => {
          this.runner_near_count="0"
        }
      });

    },
    add_runner_order(){
      this.goToPageUrlLogin('/ymq_canyino2o/pages/errand/add_order/index');
    },
		getRunnerTem() {
			let that = this;
			app.globalData.util.request({
				url: 'entry/wxapp/runner_tpl_type',
				success(res) {
					that.runnerTem = res.data.data;

          uni.setStorageSync("runnerTem_runnerTem",this.runnerTem)
				}
			});
		},
		getRunnerBg() {
			app.globalData.util.request({
				url: 'entry/wxapp/runner_config',
				success(res) {

          //todo 待修改
          //app.globalData.siteinfo.domain_root +
          // this.runner_bg_image = 'http://w7wm.ttmm.vip/attachment/' + res.data.data[3].value
          this.runner_bg_image = app.globalData.siteinfo.domain_root + '/attachment/' + res.data.data[3].value

          uni.setStorageSync("runner_bg_image",this.runner_bg_image)
				}
			});
		},
		toRiderList() {
			uni.navigateTo({
				url: '/ymq_canyino2o/pages/rider/index'
			});
		},
		toggle(type) {
			this.$refs.popup.open(type);
		},
		onHandleClick(item) {
			// console.log(item, 'item');
			uni.navigateTo({
				url: item.url
			});
		},
		hotboom() {
			uni.navigateTo({
				url: '/ymq_canyino2o/pages/errand/hotboom/index'
			});
		},
		errand() {
			uni.navigateTo({
				url: '/ymq_canyino2o/pages/errand/add_order/index'
			});
		},
		send() {
			uni.navigateTo({
				url: '/ymq_canyino2o/pages/errand/sendandcollect/index?type=1'
			});
		},
		collect() {
			uni.navigateTo({
				url: '/ymq_canyino2o/pages/errand/sendandcollect/index?type=2'
			});
		}
	}
	// 页面处理函数--监听用户下拉动作
	// onPullDownRefresh() { uni.stopPullDownRefresh(); },
	// 页面处理函数--监听用户上拉触底
	// onReachBottom() {},
	// 页面处理函数--监听页面滚动(not-nvue)
	// onPageScroll(event) {},
	// 页面处理函数--用户点击右上角分享
	// onShareAppMessage(options) {},
};
</script>

<style scoped>
.errand {
	position: relative;
	background: #fff;
	/*min-height: 100vh;*/
  /*H5平台 最小高度100vh-顶部导航高度-底部导航高度*/
  /* #ifdef H5 */
  min-height: calc(100vh - 100rpx - 100rpx);
  /* #endif */
  /* #ifndef H5 */
  /*非H5平台 全部高度-底部导航高度*/
  min-height: calc(100vh - 100rpx);
  /* #endif */
}
.errand > image {
	width: 100%;
	height: 400rpx;
}
.errand .tip {
	position: absolute;
	top: 200rpx;
	left: 50%;
	transform: translateX(-50%);
	padding: 10rpx 20rpx;
	border-radius: 50rpx;
	background: rgb(107, 70, 3);
	color: #fff;
	cursor: pointer;
}
.errand .tip span {
	font-weight: 600;
	color: orange;
}
.errand .near {
	position: absolute;
	transform: translateX(-50%);
	top: 280rpx;
	left: 50%;
	height: 120rpx;
	width: 95%;
	background: #fff;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 50rpx;
}
.errand .near span {
	font-weight: 600;
	font-size: 28rpx;
	cursor: pointer;
}
.errand .near button {
	width: 80rpx;
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24rpx;
	border-radius: 50%;
	color: #fff;
	background: rgb(231, 141, 6);
	font-weight: 600;
	margin: 0;
	padding: 0;
}

/*.nav-runner-item {*/
/*  @apply border-0 bg-yellow-100 mr-4 mt-2 px-3 py-1 rounded text-yellow-500;*/
/*}*/
.nav-runner-item {
  border: 0; /* border-0 in Tailwind */
  background-color: #fefcbf; /* bg-yellow-100 in Tailwind */
  margin-right: 1rem; /* mr-4 in Tailwind */
  margin-top: 0.5rem; /* mt-2 in Tailwind */
  padding-left: 0.75rem; /* px-3 in Tailwind */
  padding-right: 0.75rem; /* px-3 in Tailwind */
  padding-top: 0.25rem; /* py-1 in Tailwind */
  padding-bottom: 0.25rem; /* py-1 in Tailwind */
  border-radius: 0.5rem; /* rounded in Tailwind */
  color: #f59e0b; /* text-yellow-500 in Tailwind */
}


.feature-wrapper .title {
	font-weight: 600;
	font-size: 32rpx;
	text-align: center;
	margin-bottom: 20rpx;
}
.feature {
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.feature .feature-item {
	width: 20%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.feature .feature-item image {
	width: 100rpx;
	height: 100rpx;
	margin-bottom: 20rpx;
}
</style>
